<script setup>
</script>
<template>
    <div>
      <el-affix :offset="0">
        <div class="box">
            <header>
                <div class="box1">
                    <p><a href="https://www.apple.com.cn/">苹果商城</a></p>
                    <p>|</p>
                    <p><a href="https://www.apple.com.cn">华为商城</a></p>
                    <p>|</p>
                    <p>loT</p>
                    <p>|</p>
                    <p>云服务</p>
                    <p>|</p>
                    <p>嵌入式</p>
                    <p>|</p>
                    <p>人工智能</p>
                    <p>|</p>
                    <p><a>HelloVue</a></p>
                    <p>|</p>
                    <p>企业团购</p>
                    <p>|</p>
                    <p>你好</p>
                    <p>|</p>
                    <p>协议规则</p>
                    <p>|</p>
                    <p>计算机网络</p>
                    <p>|</p>
                    <p>Select Location</p>
                </div>
                <div class="box2">
                    <p><a href="C:\Users\gian\Desktop\Vue+JQ\vueyuekaozja\src\assets\login.html">登录</a></p>
                    <p>|</p>
                    <p>注册</p>
                    <p>|</p>
                    <p>消息通知</p>
                </div>
            </header>
        </div>
      </el-affix>
        <div class="box3">
            <img src="../assets/校徽.jpg" />
            <div class="box31">
                <p>小米手机</p>
                <p>Redmi红米</p>
                <p>电视</p>
                <p>笔记本</p>
                <p>家电</p>
                <p>路由器</p>
                <p>智能硬件</p>
                <p>服务</p>
                <p>社区</p>
            </div>
            <div class="box32">
                <div class="box321">
                  <el-input v-model="input" placeholder="请输入搜索内容" />
                    <div class="box3211">
                      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path></svg>
                    </div>
                </div>
            </div>
        </div>
        <div class="box4">
            <div class="box41">
                <div class="box411">

                    <div>手机 电话卡</div>

                    <div class="box4112">></div>
                </div>
                <div class="box411">
                  <div>手机 电话卡</div>
                    <div class="box4112">></div>
                </div>
                <div class="box411">
                  <div>手机 电话卡</div>
                    <div class="box4112">></div>
                </div>
                <div class="box411">
                  <div>手机 电话卡</div>
                    <div class="box4112">></div>
                </div>
                <div class="box411">
                  <div>手机 电话卡</div>
                    <div class="box4112">></div>
                </div>
                <div class="box411">
                  <div>手机 电话卡</div>
                    <div class="box4112">></div>
                </div>
                <div class="box411">
                  <div>手机 电话卡</div>
                    <div class="box4112">></div>
                </div>
                <div class="box411">
                  <div>手机 电话卡</div>
                    <div class="box4112">></div>
                </div>
                <div class="box411">
                  <div>手机 电话卡</div>
                    <div class="box4112">></div>
                </div>
                <div class="box411">
                  <div>手机 电话卡</div>
                    <div class="box4112">></div>
                </div>
            </div>
            <div class="box42">
                <el-carousel trigger="click" height="450px" ref="lbt" @change="slideBanner()">
                    <el-carousel-item v-for="(item, index) in banner" :key="index">
                        <img :src="item">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="box5">
            <div class="box51">
                <div class="box511">
                    <img src="../assets/开发.png">
                    <p>秒杀了</p>
                </div>
                <div class="box511">
                    <img src="../assets/仙人掌多肉植物盆栽2.png">
                    <p>企业团购</p>
                </div>
                <div class="box511">
                    <img src="../assets/仙人掌多肉植物盆栽12.png">
                    <p>F码通道</p>
                </div>
                <div class="box511">
                    <img src="../assets/教育.png">
                    <p>以旧换新</p>
                </div>
                <div class="box511">
                    <img src="../assets/logo.svg">
                    <p>以新换旧</p>
                </div>
                <div class="box511">
                    <img src="../assets/设计.png">
                    <p>话费消费</p>
                </div>
            </div>
            <div class="box52">
                <div class="box521">
                    <img src="../assets/暂无商品.png">
                </div>
                <div class="box521">
                    <img src="../assets/暂无商品.png">
                </div>
                <div class="box521">
                    <img src="../assets/暂无商品.png">
                </div>
            </div>
        </div>
        <div class="bo6">
            <div class="box6">
                <div class="box61">
                    <p>小米闪购</p>
                    <div class="box611">
                      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z"></path></svg>
                        <img src="../assets/list.png">
                    </div>
                </div>
                <div class="box62">
                    <div class="box621">
                        <img src="../assets/无数据.png">
                        <h4>？</h4>
                        <p>？</p>
                        <div class="box6211">
                            <span>{{moneyforxiaomi}}</span>
                            <s>{{zk}}</s>
                        </div>
                    </div>
                    <div class="box621">
                        <img src="../assets/无数据.png">
                        <h4>米家剃须刀</h4>
                        <p>剃须刀</p>
                        <div class="box6211">
                            <span>{{moneyforxiaomi}}</span>
                            <s>{{zk}}</s>
                        </div>
                    </div>
                    <div class="box621">
                        <img src="../assets/无数据.png">
                        <h4>Huawei Mate20</h4>
                        <p>支持国货，从你做起</p>
                        <div class="box6211">
                            <span>9999元</span>
                            <s>90000元</s>
                        </div>
                    </div>
                    <div class="box621">
                        <img src="../assets/无数据.png">
                        <h4>8848钛晶手机</h4>
                        <p>手机</p>
                        <div class="box6211">
                            <span>{{moneyforxiaomi}}</span>
                            <s>{{zk}}</s>
                        </div>
                    </div>
                    <div class="box621">
                        <img src="../assets/无数据.png">
                        <h4>我是VUE</h4>
                        <p>Vue</p>
                        <div class="box6211">
                            <span>{{zk}}</span>
                            <s>{{moneyforxiaomi}}</s>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bo11">
            <div class="bo111">
                <div class="box61">
                    <p>手机</p>
                    <div class="box611">
                        <p>查看全部</p>
                        <img src="../assets/list.png">
                        <img src="../assets/contacts.png">
                    </div>
                </div>
                <div class="bo112">
                    <div class="bo1121">
                        <p>制作人说明</p>
                        <h1>HelloWorld</h1>
                        <p>制作人</p>
                        <span>{{moneyforxiaomi}}<b>元起</b></span>
                        <img src="../assets/校徽.jpg">
                    </div>
                    <div class="bo1122">
                        <div class="bo11221">
                            <img src="../assets/无数据.png">
                            <p>HELLO World</p>
                            <b>6</b>
                            <span>{{moneyforxiaomi}}<s>2599元</s></span>
                        </div>
                        <div class="bo11221">
                            <img src="../assets/无数据.png">
                            <p>HELLO World</p>
                            <b>HELLO World</b>
                            <span>{{moneyforxiaomi}}<s>2599元</s></span>
                        </div>
                        <div class="bo11221">
                            <img src="../assets/无数据.png">
                            <p>HELLO World</p>
                            <b>HELLO World</b>
                            <span>{{moneyforxiaomi}}<s>2599元</s></span>
                        </div>
                        <div class="bo11221">
                            <img src="../assets/无数据.png">
                            <p>HELLO World</p>
                            <b>HELLO World</b>
                            <span>{{moneyforxiaomi}}<s>2599元</s></span>
                        </div>
                        <div class="bo11221">
                            <img src="../assets/无数据.png">
                            <p>HELLO World</p>
                            <b>HELLO World</b>
                            <span>{{moneyforxiaomi}}<s>2599元</s></span>
                        </div>
                        <div class="bo11221">
                            <img src="../assets/无数据.png">
                            <p>HELLO World</p>
                            <b>HELLO World</b>
                            <span>{{moneyforxiaomi}}<s>2599元</s></span>
                        </div>
                        <div class="bo11221">
                            <img src="../assets/无数据.png">
                            <p>HELLO World</p>
                            <b>HELLO World</b>
                            <span>{{moneyforxiaomi}}<s>2599元</s></span>
                        </div>
                        <div class="bo11221">
                            <img src="../assets/无数据.png">
                            <p>HELLO World</p>
                            <b>HELLO World</b>
                            <span>{{moneyforxiaomi}}<s>2599元</s></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bo7">
            <div class="box7">
                <div class="box71">
                    <div class="box711">
                        <h1>小米感恩钜惠</h1>
                        <p>Hello World</p>
                    </div>
                    <img src="../assets/校徽.jpg">
                </div>
            </div>
        </div>
        <div class="bo8">
            <div class="box8">
                <div class="box81">
                    <p>视频</p>
                    <div class="box811">
                        <p>查看全部</p>
                      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z"></path></svg>
                    </div>
                </div>
                <div class="box82">
                    <div class="box821"  v-on:click="moneyforxiaomi=9000">
                        <img src="../assets/个人信息.png">
                        <div class="box8211">
                            <p>点我改变价格</p>
                            <span>hello world！</span>
                        </div>
                        <div class="box822">
                            <img src="../assets/logo.svg">
                        </div>
                    </div>
                    <div class="box821">
                        <img src="../assets/个人信息.png">
                        <div class="box8211">
                            <p>你好，我是手机</p>
                            <span>hello world！</span>
                        </div>
                        <div class="box822">
                            <img src="../assets/logo.svg">
                        </div>
                    </div>
                    <div class="box821">
                        <img src="../assets/个人信息.png">
                        <div class="box8211">
                            <p>HEllO World</p>
                            <span>Hello World</span>
                        </div>
                        <div class="box822">
                            <img src="../assets/logo.svg">
                        </div>
                    </div>
                    <div class="box821" v-on:click="alert('Hello World!')">
                        <img src="../assets/个人信息.png">
                        <div class="box8211">
                            <p>1</p>
                            <span>改变从明天开始，今天就算了</span>
                        </div>
                        <div class="box822">
                            <img src="../assets/logo.svg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box9">
            <div class="box91">
                <img src="../assets/启动.png" alt="">
                <p>预约服务</p>
            </div>
            <p>|</p>
            <div class="box91">
                <img src="../assets/指南针.png" alt="">
                <p>预约服务</p>
            </div>
            <p>|</p>
            <div class="box91">
                <img src="../assets/data%20constraint.png" alt="">
                <p>预约学习服务</p>
            </div>
            <p>|</p>
            <div class="box91">
                <img src="../assets/logo.svg" alt="">
                <p>预约服务</p>
            </div>
            <p>|</p>
            <div class="box91">
                <img src="../assets/logo.svg" alt="">
                <p>预约服务</p>
            </div>
        </div>
        <div class="box10">
            <div class="box101">
                <div class="box1011">
                    <p>帮助中心</p>
                    <span>账户管理</span>
                    <span>购物指南</span>
                    <span>订单操作</span>
                </div>
                <div class="box1011">
                    <p>服务支持</p>
                    <span>售后政策</span>
                    <span>自助服务</span>
                    <span>相关下载</span>
                </div>
                <div class="box1011">
                    <p>线下门店</p>
                    <span>小米之家</span>
                    <span>服务网点</span>
                    <span>授权体验店</span>
                </div>
                <div class="box1011">
                    <p>关于小米</p>
                    <span>了解小米</span>
                    <span>加入小米</span>
                    <span>投资者关系</span>
                </div>
                <div class="box1011">
                    <p>关注我们</p>
                    <span>新浪微博</span>
                    <span>官方微信</span>
                    <span>联系我们</span>
                </div>
                <div class="box1011">
                    <p>特色服务</p>
                    <span>F码通道</span>
                    <span>礼物码</span>
                    <span>防伪查询</span>
                </div>
            </div>
            <div class="box102">
                <h2>13030003000</h2>
                <p>周一至周日 8:00-18:00</p>
                <span>仅收话费</span>
                <div class="box103">
                    <img src="../assets/防渗设施.png">
                    人工客服
                </div>
            </div>
        </div>
        <div class="boxx1">
            <img src="../assets/校徽.jpg">
            <div class="boxx11">
                <p>小米商城 | 你好 | 米家 | 米聊 | 多看 | 游戏 | 路由器 | 米粉卡 | 政企服务 | 小米天猫店 | 隐私政策 | 用户协议 | 账号协议 | 问题反馈 | 123举报 | 诚信合规 | Select Location</p>
                <span>未备案</span>
                <span>营业执照:无</span>
                <span>备案号：无</span>
                <span>违法和不良信息举报电话：110、12315</span>
                <div class="boxx111">
                    <div class="boxx1111">
                        <img src="../assets/logo.svg">
                        <h2>Vue3</h2>
                    </div>
                    <div class="boxx1111">
                      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path d="M839.7 734.7c0 33.3-17.9 41-17.9 41S519.7 949.8 499.2 960c-10.2 5.1-20.5 5.1-30.7 0 0 0-314.9-184.3-325.1-192-5.1-5.1-10.2-12.8-12.8-20.5V368.6c0-17.9 20.5-28.2 20.5-28.2L466 158.6c12.8-5.1 25.6-5.1 38.4 0 0 0 279 161.3 309.8 179.2 17.9 7.7 28.2 25.6 25.6 46.1-.1-5-.1 317.5-.1 350.8zM714.2 371.2c-64-35.8-217.6-125.4-217.6-125.4-7.7-5.1-20.5-5.1-30.7 0L217.6 389.1s-17.9 10.2-17.9 23v297c0 5.1 5.1 12.8 7.7 17.9 7.7 5.1 256 148.5 256 148.5 7.7 5.1 17.9 5.1 25.6 0 15.4-7.7 250.9-145.9 250.9-145.9s12.8-5.1 12.8-30.7v-74.2l-276.5 169v-64c0-17.9 7.7-30.7 20.5-46.1L745 535c5.1-7.7 10.2-20.5 10.2-30.7v-66.6l-279 169v-69.1c0-15.4 5.1-30.7 17.9-38.4l220.1-128zM919 135.7c0-5.1-5.1-7.7-7.7-7.7h-58.9V66.6c0-5.1-5.1-5.1-10.2-5.1l-30.7 5.1c-5.1 0-5.1 2.6-5.1 5.1V128h-56.3c-5.1 0-5.1 5.1-7.7 5.1v38.4h69.1v64c0 5.1 5.1 5.1 10.2 5.1l30.7-5.1c5.1 0 5.1-2.6 5.1-5.1v-56.3h64l-2.5-38.4z" fill="currentColor"></path></svg>
                        <p>Element-UI<br>Element-plus</p>
                    </div>
                    <div class="boxx1111">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" xml:space="preserve" data-v-ea893728=""><path d="M938.67 512.01c0-44.59-6.82-87.6-19.54-128H682.67a212.372 212.372 0 0 1 42.67 128c.06 38.71-10.45 76.7-30.42 109.87l-182.91 316.8c235.65-.01 426.66-191.02 426.66-426.67z" fill="currentColor"></path><path d="M576.79 401.63a127.92 127.92 0 0 0-63.56-17.6c-22.36-.22-44.39 5.43-63.89 16.38s-35.79 26.82-47.25 46.02a128.005 128.005 0 0 0-2.16 127.44l1.24 2.13a127.906 127.906 0 0 0 46.36 46.61 127.907 127.907 0 0 0 63.38 17.44c22.29.2 44.24-5.43 63.68-16.33a127.94 127.94 0 0 0 47.16-45.79v-.01l1.11-1.92a127.984 127.984 0 0 0 .29-127.46 127.957 127.957 0 0 0-46.36-46.91z" fill="currentColor"></path><path d="M394.45 333.96A213.336 213.336 0 0 1 512 298.67h369.58A426.503 426.503 0 0 0 512 85.34a425.598 425.598 0 0 0-171.74 35.98 425.644 425.644 0 0 0-142.62 102.22l118.14 204.63a213.397 213.397 0 0 1 78.67-94.21zM512.01 938.68H512zM414.76 701.95a213.284 213.284 0 0 1-89.54-86.81L142.48 298.6c-36.35 62.81-57.13 135.68-57.13 213.42 0 203.81 142.93 374.22 333.95 416.55h.04l118.19-204.71a213.315 213.315 0 0 1-122.77-21.91z" fill="currentColor"></path></svg>
                        <p>GitHub<br>信用评价</p>
                    </div>
                    <div class="boxx1111">
                        <img src="../assets/social_github.png">
                        <p>网上交易<br>保障中心</p>
                    </div>
                    <div class="boxx1111">
                        <img src="../assets/social_linkedin.png">
                        <p>良心经营<br>放心消费</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bb1">
            <p>感谢观看</p>
        </div>
      <el-divider>我是分割线</el-divider>
    </div>
  <div align="center" style="background-color: pink">
    <a v-on:click="showdev = !showdev,showdev==false?xy='显示':xy='隐藏'">点我{{ xy }}制作人员清单</a><br>
    <table border="1px" v-show="showdev">
      <tr>
        <td colspan="3">制作人员</td>
      </tr>
      <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>比例</td>
      </tr>
      <tr v-for="(item,index) in info">
        <td>{{item.id+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.bl}}</td>
      </tr>
    </table>
  </div>
  <div align="center">
    <a>价格展示</a>
    <input type="text" v-model="moneyforxiaomi" v-bind:placeholder="moneyforxiaomi"><br>
    <el-popover
        placement="top-start"
        title="提交"
        :width="200"
        trigger="hover"
        content="提交后可以改变上方商品的价格"
    >
      <template #reference>
        <el-button type="primary" round>提交</el-button><br>
      </template>
    </el-popover><br>
    <a>当前价格：{{moneyforxiaomi}}</a><br>
    <el-rate
        v-model="value"
        :texts="['非常差', '差', '一般', '好', '非常好']"
        show-text
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
const input = ref('')
</script>
<script>
export default {
    name: "Vue",

    data() {

        return {
            banner: [
              "/src/assets/lunbo1.jpg",
              "/src/assets/img_1.png",
              "/src/assets/lunbo3.png",
              "/src/assets/lunbo4.png",
              "/src/assets/lunbo5.png"
            ],
          moneyforxiaomi : 6000,
          info: [
            {id:0,name:"张建安",bl:30},
            {id:1,name:"李雪",bl:20},
            {id:2,name:"赵鹏程",bl:20},
            {id:3,name:"郭思彤",bl:15},
            {id:4,name:"侯佳良",bl:15}
          ],
          showdev: true,
          xy : "隐藏"
        };
    },
    mounted() {
      this.slideBanner()
    },

    methods: {
      startAuto() {
        if (this.autoplay == false) {
          this.autoplay = true;
        }
      },
      stopAuto() {
        if (this.autoplay == true) {
          this.autoplay = false;
        }
      },
      slideBanner() {
        let that = this
        //选中item的盒子
        var box = document.querySelector('.box42');
        //手指起点X坐标
        var startPoint = 0;3
        //手指滑动重点X坐标
        var stopPoint = 0;

        //重置坐标
        var resetPoint = function () {
          startPoint = 0;
          stopPoint = 0;
        }

        //手指按下
        box.addEventListener("touchstart", function (e) {
          //手指按下的时候停止自动轮播
          that.stopAuto();
          //手指点击位置的X坐标
          startPoint = e.changedTouches[0].pageX;
        });
        //手指滑动
        box.addEventListener("touchmove", function (e) {
          //手指滑动后终点位置X的坐标
          stopPoint = e.changedTouches[0].pageX;
        });
        //当手指抬起的时候，判断图片滚动离左右的距离
        box.addEventListener("touchend", function (e) {
          console.log("1：" + startPoint);
          console.log("2：" + stopPoint);
          if (stopPoint == 0 || startPoint - stopPoint == 0) {
            resetPoint();
            return;
          }
          if (startPoint - stopPoint > 0) {
            resetPoint();
            that.$refs.lbt.next();
            return;
          }
          if (startPoint - stopPoint < 0) {
            resetPoint();
            that.$refs.lbt.prev();
            return;
          }
        });
      }
    },
    beforeRouteEnter(to, from, next) {
        document.querySelector("body").setAttribute("style", "margin:0;padding:0");
        next();
    },
    computed: {
      zk : function (){
        return this.moneyforxiaomi * 0.9
      }
    }
};
</script>
<style lang='scss'>
.box {
  width: 100%;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.716);
}
header {
  height: 40px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  color: silver;

  .box1 {
    display: flex;
    align-items: center;
  }

  .box2 {
    display: flex;
    align-items: center;
    margin-right: 100px;

    p {
      margin-left: 7px;
    }
  }
}
.po1 {
  position: absolute;
  top: 0;
  right: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 45px;
  background-color: rgb(103, 103, 103);
  color: silver;

  img {
    width: 40px;
    height: 40px;
  }
}
.box1>p {
  margin-right: 7px;
  display: flex;
}
.box3 {
  width: 1200px;
  height: 120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  >img {
    width: 60px;
    height: 60px;
  }

  .box31 {
    display: flex;

    p {
      margin: 0 10px;
    }
  }

  .box32 {
    display: flex;

    .box321 {
      display: flex;
      width: 220px;
      height: 40px;
      border: 1px solid silver;
      justify-content: flex-end;

      .box3211 {
        width: 50px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid silver;

        img {
          width: 25px;
          height: 25px;
        }
      }
    }
  }
}
.box4 {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;

  .box41 {
    display: flex;
    flex-direction: column;
    width: 200px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 20px 0;
    font-weight: 500;
    height: 410px;
    justify-content: space-between;

    .box411 {
      display: flex;
      padding: 10px 25px;
      justify-content: space-between;
    }
  }

  .box42 {
    flex: 1;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
.box411:hover {
  background: rgba(0, 0, 0, 0.658);
  transition: all, 0.9s;
}
.box5 {
  width: 1200px;
  height: 200px;
  margin: 15px auto 0;
  display: flex;
  justify-content: space-between;

  .box51 {
    background: rgb(87, 93, 20);
    width: 200px;
    height: 160px;
    display: flex;
    font-size: 12px;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;

    .box511 {
      width: 33%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      img {
        width: 40px;
        height: 40px;
      }

      p {
        margin: 0;
        color: white;
      }
    }
  }

  .box52 {
    flex: 1;
    display: flex;
    height: 160px;

    .box521 {
      margin-left: 15px;
      flex: 1;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.bo6 {
  width: 100%;
  background: rgb(244, 244, 244);
}
.box6 {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  .box61 {
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-size: 20px;
    }

    .box611 {
      display: flex;

      img {
        border: 1px solid black;
        width: 50px;
        height: 30px;
      }
    }
  }

  .box62 {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .box621 {
      margin: 10px;
      flex: 1;
      display: flex;
      flex-direction: column;
      background: white;
      align-items: center;
      padding: 30px 10px;
      font-size: 14px;
      height: 337px;

      img {
        width: 100%;
      }

      p {
        margin: 10px 0;
        color: rgb(139, 139, 139);
      }

      h4 {
        margin: 0;
      }

      span {
        color: yellowgreen;
        font-size: 20px;
      }

      s {
        color: silver;
      }
    }
  }
}
.bo7 {
  width: 100%;
  background: rgb(244, 244, 244);
  padding-top: 20px;

  .box7 {
    width: 1200px;
    margin: 0 auto;
    background: red;
    display: flex;

    .box71 {
      display: flex;
      justify-content: space-between;

      img {
        width: 100px;
      }

      .box711 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 10px 200px 0 200px;
        color: white;

        h1 {
          margin: 0;
        }
      }
    }
  }
}
.bo8 {
  width: 100%;
  background: rgb(244, 244, 244);
  padding-top: 20px;
  padding-bottom: 20px;

  .box8 {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    .box81 {
      display: flex;
      justify-content: space-between;
      font-size: 20px;

      .box811 {
        display: flex;
        align-items: center;

        img {
          width: 30px;
          height: 30px;
          border: 1px solid black;
          border-radius: 50%;
        }
      }
    }

    .box82 {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .box821 {
        flex: 1;
        padding: 0 10px;
        position: relative;

        img {
          width: 100%;
          height: 100%;
        }

        .box8211 {
          height: 100px;
          display: flex;
          flex-direction: column;
          align-items: center;
          background: white;

          p {
            margin: 20px 0 0 0;
          }
        }
      }

      .box822 {
        display: flex;
        position: absolute;
        bottom: 110px;
        left: 20px;

        img {
          width: 30px;
          height: 30px;
        }
      }
    }
  }
}
.box9 {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0;

  .box91 {
    display: flex;
    align-items: center;

    img {
      width: 35px;
      height: 35px;
    }
  }
}
.box10 {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid black;

  .box101 {
    width: 800px;
    display: flex;
    justify-content: space-around;
    margin-top: 40px;

    .box1011 {
      display: flex;
      flex-direction: column;

      span {
        margin: 5px 0;
        color: rgb(106, 106, 106);
      }
    }
  }

  .box102 {
    display: flex;
    flex-direction: column;
    border-left: 1px solid black;
    margin-top: 40px;
    padding: 0 50px;
    justify-content: center;
    align-items: center;

    h2 {
      margin: 0;
      color: yellowgreen;
    }

    p {
      margin: 0;
    }

    span {
      margin-bottom: 10px;
    }

    .box103 {
      border: 3px solid yellowgreen;
      color: yellowgreen;
      display: flex;

      img {
        width: 20px;
        height: 20px;
      }
    }
  }
}
.bo11 {
  width: 100%;
  background: rgb(244, 244, 244);

  .bo111 {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    .box61 {
      display: flex;
      justify-content: space-between;
      align-items: center;

      p {
        font-size: 20px;
      }

      .box611 {
        display: flex;
        align-items: center;

        img {
          border: 1px solid black;
          width: 50px;
          height: 30px;
        }
      }
    }
  }

  .bo112 {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .bo1121 {
      padding-top: 50px;
      width: 230px;
      height: 735px;
      background-color: rgb(203, 151, 53);
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        width: 250px;
      }

      h1 {
        margin: 0;
        font-weight: normal;
        color: white;
      }

      p {
        margin: 0;
        color: rgb(226, 226, 226);
      }

      span {
        margin-top: 30px;
        color: rgb(178, 0, 0);
        font-size: 30px;
        margin-bottom: 100px;

        b {
          font-weight: normal;
          font-size: 15px;
        }
      }
    }

    .bo1122 {
      flex: 1;
      display: flex;
      flex-wrap: wrap;

      .bo11221 {
        width: 22%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        align-items: center;
        background-color: white;
        justify-content: space-between;
        padding-bottom: 20px;
        margin: 10px;

        img {
          width: 100%;
        }

        p {
          margin: 20px 0 0 0;
        }

        b {
          font-weight: normal;
          color: silver;
        }

        span {
          color: yellowgreen;
          margin-top: 10px;

          s {
            color: silver;
            font-size: 12px;
          }
        }
      }
    }
  }
}
.bo11221:hover {
  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.701);
  transform: scale(1.05);
  transition: all 0.4s;
}
.box821:hover {
  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.701);
  transform: scale(1.05);
  transition: all 0.4s;
}
.box621:hover {
  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.701);
  transform: scale(1.05);
  transition: all 0.4s;
}
.boxx1{
  width: 1200px;
  margin: 60px auto;
  display: flex;
  align-items: flex-start;
  img{
    width: 60px;
    height: 60px;
  }
  .boxx11{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    p{
      margin: 0;
      font-size: 14px;
      color: rgb(94, 94, 94);
    }
    span{
      font-size: 14px;
      color: rgb(170, 170, 170);
    }
    .boxx111{
      display: flex;
      img{
        width: 50px;
        height: 50px;
      }
      .boxx1111{
        display: flex;
        align-items: center;
        h2{
          margin: 0;
        }
        p{
          margin: 0;
        }
      }
    }
  }
}
.bb1{
  width: 1200px;
  margin: 0 auto;
  color: silver;
  font-size: 25px;
  text-align: center;

}
</style>